<template>
  <div class="app-main-container" style="padding-top: 10px;">
    <div class="reserve">
      <el-tabs v-model="activeIndex" @tab-click="tabChange">
        <el-tab-pane :label="$t('message.qbmp')" name="first">
          <QueryForm
            v-model="filters"
            :query-form-config="queryFormConfig"
            @handleQuery="getList(1)"
            @clear="clear"
          >
            <template #btns>
              <el-button v-if="meta.indexOf('CheckTicketExcel') > -1" :loading="exportLoading" type="primary" @click="handleExport">{{ $t('message.daochu') }}</el-button>
            </template>
          </QueryForm>
          <el-table
            ref="table"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-tableb"
          >
            <el-table-column
              align="center"
              :label="$t('message.mpph')"
              prop="id"
              min-width="220"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.xm')"
              prop="projectName"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.mpmc')"
              prop="ticketName"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.shoujia')"
              prop="price"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.ddh')"
              prop="orderId"
              min-width="220"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.memberInfo')"
              prop="memberInfo"
              min-width="180"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.yxrq')"
              prop="effectiveDate"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.yxsd')"
              prop="effectiveTime"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.sysj')"
              prop="useTime"
              min-width="160"
            />
            <el-table-column fixed="right" align="center" :label="$t('message.status')" min-width="80">
              <template slot-scope="scope">
                {{ ticketStauts(scope.row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="$t('message.caozuo')"
              min-width="100"
              fixed="right"
            >
              <template slot-scope="scope">
                <div v-if="meta.indexOf('RefundTicket') > -1 && scope.row.status == '0'" class="flex-cc">
                  <el-button
                    v-preventReClick
                    type="text"
                    @click="refundTicketBtn(scope.row)"
                  >{{ $t('message.tp') }}</el-button>
                </div>
                <div v-else class="flex-cc">-</div>
              </template>
            </el-table-column>
          </el-table>
          <Paginations
            :total="totalCount"
            :page="pagination.page"
            @SizeChange="pageSizeChange"
            @current-change="currentPageChange"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="meta.indexOf('ChargeOffTicketList') > -1"
          :label="$t('message.mphxjl')"
          name="second"
        >
          <QueryForm
            v-model="filterb"
            :query-form-config="queryFormConfigb"
            @handleQuery="getListb(1)"
            @clear="clearb"
          />
          <el-table
            ref="tableb"
            v-loading="listLoading"
            :data="listb"
            element-loading-text="Loading"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table doumee-element-tableb"
          >
            <el-table-column
              align="center"
              :label="$t('message.mpph')"
              prop="id"
              min-width="220"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.xm')"
              prop="projectName"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.mpmc')"
              prop="ticketName"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.yj')"
              prop="deposit"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.zffs')"
              prop="payMethod"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.hxrcsj')"
              prop="inTime"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.lcsj')"
              prop="outTime"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.cssc')"
              prop="timeOutNum"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.csje2')"
              prop="timeOutMoney"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.thje')"
              prop="refundMoney"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.status')"
              min-width="120"
              fixed="right"
            >
              <template slot-scope="scope">
                {{ ticketStautb(scope.row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="$t('message.caozuo')"
              min-width="120"
              fixed="right"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.status == '0' &&
                      meta.indexOf('AffirmOutCalculate') > -1
                  "
                  class="flex-cc"
                >
                  <el-button
                    v-preventReClick
                    type="text"
                    @click="showJsBtn(scope.row.id)"
                  >{{ $t('message.lcjs') }}</el-button>
                </div>
                <div
                  v-else-if="
                    scope.row.isRefundDeposit == '0' &&
                      scope.row.status != '0' &&
                      meta.indexOf('AffirmOutCalculate') > -1
                  "
                  class="flex-cc"
                >
                  <el-button
                    slot="reference"
                    v-preventReClick
                    type="text"
                    @click="showoffine(scope.row.id)"
                  >{{ $t('message.qrthyj') }}</el-button>
                </div>
                <div v-else class="flex-cc">-</div>
              </template>
            </el-table-column>
          </el-table>
          <Paginations
            :total="totalCountb"
            @SizeChange="pageSizeChangeb"
            @current-change="currentPageChangeb"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="$t('message.lcjs')"
      :visible.sync="showJs"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="500px"
    >
      <div class="warnningTip">
        <span><i class="el-icon-warning-outline" /> {{ form.description }}</span>
      </div>
      <el-form ref="ruleForm" :model="form" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.cssc')">
          <span>{{ form.timeOut }}{{ $t('message.fenzhong') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.mpyj')">
          <span>{{ form.deposit }}{{ $t('message.yuan') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.cssf')">
          <el-input
            v-model="form.price"
            :placeholder="$t('message.qsr') + $t('message.cssf')"
            style="width: 200px"
            oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          />
          <span class="placeholder6 ml10">{{ $t('message.yuan') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.thyj')">
          <div class="red">{{ $t('message.rmbfh') }}{{ form.deposit > form.price? (Number(form.deposit)- Number(form.price)).toFixed(2): 0 }}</div>
          <div class="red">{{ $t('message.thjegjzffs') }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showJs = false">{{ $t('message.qx') }}</el-button>
        <el-button
          :loading="subLoading"
          type="primary"
          @click="onSubmit"
        >{{ $t('message.jiesuan') }}</el-button>
      </div>
    </el-dialog>

    <TicketRefund v-if="isShowRefund" ref="RefundRef" @close="isShowRefund = false" @success="refundSuccess" />
  </div>
</template>

<script>
import {
  getProjectList,
  checkTicketLists,
  chargeOffTicketList,
  affirmOutCalculate,
  outCalculate,
  offineCalculate,
  ticketRecordExport
} from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
import Paginations from '@/components/paginations/paginations'
import QueryForm from '@/components/QueryForm'
import TicketRefund from './refund.vue'
export default {
  name: 'CheckTicketHistory',
  components: {
    Paginations,
    QueryForm,
    TicketRefund
  },
  data() {
    return {
      isShowRefund: false,
      exportLoading: false,
      queryFormConfig: {
        formItems: [{
          filed: 'id',
          type: 'input',
          label: this.$t('message.mpph'),
          clearable: true
        }, {
          filed: 'projectId',
          type: 'select',
          label: this.$t('message.syxm'),
          clearable: true,
          options: []
        }, {
          filed: 'ticketName',
          type: 'input',
          label: this.$t('message.mpmc'),
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: this.$t('message.status'),
          clearable: true,
          options: [
            { value: '0', label: this.$t('message.wsy') },
            { value: '1', label: this.$t('message.ysy') },
            { value: '2', label: this.$t('message.ytp') },
            { value: '4', label: this.$t('message.ysx') }]
        }, {
          filed: 'memberInfo',
          type: 'input',
          label: this.$t('message.memberInfo'),
          placeholder: this.$t('message.qsr') + this.$t('message.hy4'),
          clearable: true
        }, {
          filed: 'orderId',
          type: 'input',
          label: this.$t('message.ddbh'),
          clearable: true
        }],
        online: true
      },
      queryFormConfigb: {
        formItems: [{
          filed: 'id',
          type: 'input',
          label: this.$t('message.mpph'),
          clearable: true
        }, {
          filed: 'projectId',
          type: 'select',
          label: this.$t('message.syxm'),
          placeholder: this.$t('message.qxz') + this.$t('message.xm'),
          clearable: true,
          options: []
        }, {
          filed: 'ticketName',
          type: 'input',
          label: this.$t('message.mpmc'),
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: this.$t('message.status'),
          clearable: true,
          options: [
            { value: '0', label: this.$t('message.djs') },
            { value: '1', label: this.$t('message.yhzdjs') },
            { value: '2', label: this.$t('message.pcdjs') }]
        }],
        online: true
      },
      meta: [],
      subLoading: false,
      showJs: false,
      modalDialog: store.getters.dialog,
      totalCount: 0,
      totalCountb: 0,
      list: [],
      listb: [],
      listLoading: true,
      projectList: [],
      activeIndex: 'first',
      checkedStatuss: [
        { value: '0', label: this.$t('message.wsy') },
        { value: '1', label: this.$t('message.ysy') },
        { value: '2', label: this.$t('message.ytp') },
        { value: '4', label: this.$t('message.ysx') }
      ],
      statusList: [{ value: '0', label: this.$t('message.djs') },
        { value: '1', label: this.$t('message.yhzdjs') },
        { value: '2', label: this.$t('message.pcdjs') }],
      pagination: {
        page: 1,
        rows: 10
      },
      paginationb: {
        page: 1,
        rows: 10
      },
      filters: {},
      filterb: {},
      form: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getInitData()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    onSubmit() {
      const { form } = this
      if (!form.price && form.price !== 0 && form.price !== '0') {
        return this.$message.info(this.$t('message.qsr') + this.$t('message.cssf'))
      }
      this.subLoading = true
      affirmOutCalculate({ param: { ...form }})
        .then((res) => {
          this.subLoading = false
          if (res.errorCode !== '000000') return
          this.$message.success(this.$t('message.lcjscg'))
          this.showJs = false
          this.getListb(1)
        })
        .catch(() => {
          this.subLoading = false
        })
    },
    refundSuccess() {
      this.isShowRefund = false
      this.getList()
    },
    handleExport() {
      const { filters } = this
      this.exportLoading = true
      ticketRecordExport({
        param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            const a = document.createElement('a') // 创建一个a标签元素
            a.style.display = 'none' // 设置元素不可见
            a.href = res.record.showUrl // 设置下载地址
            document.body.appendChild(a) // 加入
            a.click() // 触发点击,下载
            document.body.removeChild(a) //
            this.$message.success(this.$t('message.dccg'))
          }
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
    showJsBtn(id) {
      outCalculate({ param: { id }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.form = res.record
        this.showJs = true
      })
    },
    showoffine(id) {
      this.$confirm(this.$t('message.thyjtc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      }).then(res => {
        offineCalculate({ param: { id }}).then((res) => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.$t('message.yjthcg'))
          this.getListb(1)
        })
      })
    },
    tabChange(tab) {
      this.activeIndex = tab.name
      if (tab.name === 'second') {
        this.getListb(1)
      }
    },
    currentPageChange(val) {
      this.getList(val)
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    currentPageChangeb(val) {
      this.getListb(val)
    },
    pageSizeChangeb(val) {
      this.paginationb.rows = val
      this.getListb(1)
    },
    toEdit(id) {
      this.$router.push({ name: 'VenueEdit' })
    },
    getInitData() {
      getProjectList({
        pagination: {
          page: 1,
          rows: 1000,
          firstQueryTime: parseTime(new Date())
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          projectName: '',
          status: ''
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.projectList = res.recordList
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.projectName
            e.value = e.id
          })
          this.queryFormConfig.formItems[1].options = arr
          this.queryFormConfigb.formItems[1].options = arr
          this.getList(1)
        }
      })
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    clearb() {
      this.filterb = {}
      this.getListb(1)
    },
    ticketStauts(status) {
      const temp = this.checkedStatuss.find((item) => item.value === status)
      return temp !== undefined ? temp.label : '-'
    },
    ticketStautb(status) {
      const temp = this.statusList.find((item) => item.value === status)
      return temp !== undefined ? temp.label : '-'
    },
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      checkTicketLists({
        pagination,
        param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
            this.$refs.table.doLayout()
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getListb(page) {
      const { filterb, paginationb } = this
      if (page) {
        paginationb.page = page
        this.paginationb.page = Number(page)
      }
      paginationb.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      chargeOffTicketList({
        pagination: paginationb,
        param: {
          ...filterb,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.listb = res.recordList
            this.totalCountb = res.totalCount
            this.$refs.tableb.doLayout()
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    refundTicketBtn(row) {
      this.isShowRefund = true
      this.$nextTick(() => {
        this.$refs.RefundRef.rowDetail(row)
        this.$refs.RefundRef.isShow = true
      })
    }
  }
}
</script>
